<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>天天考勤</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The styles -->
		<link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">
		<link href="css/charisma-app.css" rel="stylesheet">
		<link href='css/fullcalendar.css' rel='stylesheet'>
		<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
		<link href='css/chosen.min.css' rel='stylesheet'>
		<link href='css/colorbox.css' rel='stylesheet'>
		<link href='css/responsive-tables.css' rel='stylesheet'>
		<link href='css/bootstrap-tour.min.css' rel='stylesheet'>
		<link href='css/jquery.noty.css' rel='stylesheet'>
		<link href='css/noty_theme_default.css' rel='stylesheet'>
		<link href='css/elfinder.min.css' rel='stylesheet'>
		<link href='css/elfinder.theme.css' rel='stylesheet'>
		<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
		<link href='css/uploadify.css' rel='stylesheet'>
		<link href='css/animate.min.css' rel='stylesheet'>
		<link href='css/jquery-confirm.css' rel='stylesheet'>
		<link href='css/bootstrap-datetimepicker.min.css' rel='stylesheet'>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>

		<!-- topbar starts -->
		<div class="navbar navbar-default" role="navigation">
			<div class="container" id="navcontainer">
				<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
					<div class="container">
						<div class="navbar-header">
							<div class="navbar-brand">天天考勤后台管理</div>
						</div>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">搜索</button>
						</form>
					</div>
				</nav>
			</div>
		</div>
		<!-- topbar ends -->
		<div class="ch-container">
			<div class="row">

				<!-- left menu starts -->
				<div class="col-sm-2 col-lg-2">
					<div class="sidebar-nav">
						<div class="nav-canvas">
							<div class="nav-sm nav nav-stacked"></div>
							<ul class="nav nav-pills nav-stacked main-menu">
								<li><a class="ajax-link" href="table.html"><i
									class="glyphicon glyphicon-align-justify"></i><span> 刷新</span></a></li>
								<li><a class="ajax-link" href="javascript:add()"><i
									class="glyphicon glyphicon-align-justify"></i><span> 添加新员工 </span></a></li>
									<li><a class="ajax-link" href="javascript:padd()"><i
									class="glyphicon glyphicon-align-justify"></i><span> 批量添加员工 </span></a></li>
							</ul>
						</div>
					</div>

				</div>
				<!--/span-->
				<!-- left menu ends -->
				<div id="content" class="col-sm-10">
					<!-- content starts -->

					<div class="row">
						<div class="box col-md-12">
							<div class="box-inner">
								<div class="box-header well" data-original-title="">
									<h2>
									<i class="glyphicon glyphicon-user"></i> 员工信息
								</h2>

								</div>
								<div class="box-content">
									<table class="table table-striped table-bordered bootstrap-datatable responsive" id="example">
										<thead>
											<tr>
												<th>编号</th>
												<th>姓名</th>
												<th>性别</th>
												<th>联系方式</th>
												<th>出生日期</th>
												<th>部门</th>
												<th>职位</th>
												<th>入职时间</th>
												<th>邮箱</th>
												<th width=20%>操作</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
						<!--/span-->

					</div>
					<!--/row-->

					<!-- content ends -->
				</div>
				<!--/#content.col-md-0-->
			</div>
			<!--/fluid-row-->

			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">员工信息</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label>姓名:</label>
								<input class="form-control" id="myname" type="text" />
							</div>
							<!--	<label>性别</label>
							<input class="form-control" id="mygender" type="text" />-->
							<div class="form-group">
								<label>性别:&nbsp;&nbsp;&nbsp;</label>
								<label class="radio-inline"><input type="radio" name="mygender" id="mygender1" value="0"> 男</label>
								<label class="radio-inline"><input type="radio" name="mygender" id="mygender2" value="1"> 女</label>
							</div>
							<div class="form-group">
								<label>联系方式:</label>
								<input class="form-control" id="myphone" type="tel" />
							</div>
							<div class="form-group">
								<label>出生日期:</label>
								<input class="form-control" id="mybirthday" type="text" />
							</div>
							<div class="form-group">
								<label>密码:</label>
								<input class="form-control" id="mypwd" type="text" />
							</div>
							<div class="form-group">
								<input class="form-control" id="myid" type="hidden" />
								<label>部门:</label>
								<input class="form-control" id="mydeparment" type="text" />
							</div>
							<div class="form-group">
								<label>职位:</label>
								<select class="form-control" id="myposition" name="myposition">
									<option value="0">员工</option>
									<option value="1">部门经理</option>
									<option value="2">副总经理</option>
									<option value="3">总经理</option>
								</select>
							</div>
							<div class="form-group">
								<label>入职时间:</label>
								<input class="form-control" id="mystartworktdate" type="text" />
							</div>
							<div class="form-group">
								<label>邮箱:</label>
								<input class="form-control" id="myemail" type="email" />
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">
								关闭</button>
							<button type="button" class="btn btn-primary" onclick="sub(1)" id="bt1">
								提交更改</button>
							<button type="button" class="btn btn-primary" onclick="sub(2)" id="bt2">
								添加</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->

			<!-- 模态框（Modal） -->
			<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">批量添加|更新员工信息</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label>文件:</label>
								<input class="form-control" id="file" name="file" type="file" />
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">
								关闭</button>
							<button type="button" class="btn btn-primary" onclick="upload()" id="bt1">
								确认上传</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->

			<footer class="row">
				<p class="col-md-9 col-sm-9 col-xs-12 copyright">&copy; 2015年12月</p>

				<p class="col-md-3 col-sm-3 col-xs-12 powered-by">Powered by: Tianjin University</p>
			</footer>

		</div>
		<!--/.fluid-container-->

		<script src="js/bootstrap.min.js"></script>

		<!-- library for cookie management -->
		<script src="js/jquery.cookie.js"></script>
		<!-- calender plugin -->
		<script src='js/moment.min.js'></script>
		<script src='js/fullcalendar.min.js'></script>
		<!-- data table plugin -->
		<script src='js/jquery.dataTables.min.js'></script>
		<!-- select or dropdown enhancer -->
		<script src="js/chosen.jquery.min.js"></script>
		<!-- plugin for gallery image view -->
		<script src="js/jquery.colorbox-min.js"></script>
		<!-- notification plugin -->
		<script src="js/jquery.noty.js"></script>
		<!-- library for making tables responsive -->
		<script src="js/responsive-tables.js"></script>
		<!-- tour plugin -->
		<script src="js/bootstrap-tour.min.js"></script>
		<!-- star rating plugin -->
		<script src="js/jquery.raty.min.js"></script>
		<!-- for iOS style toggle switch -->
		<script src="js/jquery.iphone.toggle.js"></script>
		<!-- autogrowing textarea plugin -->
		<script src="js/jquery.autogrow-textarea.js"></script>
		<!-- multiple file upload plugin -->
		<script src="js/jquery.uploadify-3.1.min.js"></script>
		<!-- history.js for cross-browser state change on ajax -->
		<script src="js/jquery.history.js"></script>
		<!-- application script for Charisma demo -->
		<script src="js/charisma.js"></script>
		<script src="js/jquery-confirm.js"></script>
		<script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/ajaxfileupload.js"></script>
		<script>
			$('#mybirthday').datetimepicker({
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				minView:'2',
				autoclose:true
			});
			$('#mystartworktdate').datetimepicker({
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				minView:'2',
				autoclose:true
			});
			function padd(){
				$('#fileModal').modal('show');
			}
			function add() {
				$('#bt2').show();
				$('#bt1').hide();
				$('#myModal').modal('show');
			}

			function sub(num) {
				var urladdress;
				var userInfo = new Object();
				if(num==1){
					var myid = $('#myid').val();
					userInfo.id = myid;
					urladdress="../user/update";
				}else{
					urladdress="../user/regist";
				}
				var mypwd = $('#mypwd').val();
				var myname = $('#myname').val();
				var mygender = $("input[type='radio']:checked").val();
				var myphone = $('#myphone').val();
				var mydeparment = $('#mydeparment').val();
				var myposition = $('#myposition').val();
				var mystartworktdate = $('#mystartworktdate').val();
				var myemail = $('#myemail').val();
				var mybirthday = $('#mybirthday').val();
				
				userInfo.phone = myphone;
				userInfo.department = mydeparment;
				userInfo.pwd = mypwd;
				userInfo.name = myname;
				userInfo.gender = mygender;
				userInfo.birthday = mybirthday;
				userInfo.position = myposition;
				userInfo.startworkdate = mystartworktdate;
				userInfo.email = myemail;
				//alert(mypwd+"||"+mybirthday+"||"+myid+"||"+myname + "||" + mygender + "||" + myphone + "||" + mydeparment + "||" + myposition + "||" + mystartworktdate + "||" + myemail);
				$.confirm({
					confirmButtonClass: 'btn-danger',
					cancelButtonClass: 'btn-info',
					confirmButton: '提交',
					cancelButton: '取消',
					content: "确定提交吗？",
					title: "请确认",
					confirm: function() {
						$.ajax({
							type: "post",
							url: urladdress,
							contentType: "application/json",
							data: JSON.stringify(userInfo),
							success: function(result) {
								window.location.reload();
							},
							error: function() {
								alert();
							}
						});
					}
				});
			}

			function upload(){
				$.ajaxFileUpload({
					url:"../user/addFromExcel",
					fileElementId:'file',
					enctype:"multipart/form-data", 
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					type:"post",
					dataType: 'text', //返回值类型 一般设置为json
					done:function(){
						window.location.reload();
					},
          success: function (data, status)  //服务器成功响应处理函数
          {
          	window.location.reload();
          	console.log(data);
              if(data.status="OK"){
              	window.location.reload();
              }
          },
          error: function (data, status, e)//服务器响应失败处理函数
          {
          	//window.location.reload();
          	console.log(data, status, e);
            alert("失败，请重试");
          }
				});
			}
		</script>
	</body>

</html>